<template>
	<view class="box">
		<scroll-view scroll-y="true" class="scroll-view-wrap" :style="'height: calc(100vh - '+curTop+'px );padding-bottom:150rpx;'">
			<view class="content">
				<view class="inputBox">
					<view class="clause">
						<!-- <rich-text :nodes="data.content"></rich-text> -->
						<!-- #ifdef MP-WEIXIN -->
						<rich-text :nodes="giftData.giftDetails"></rich-text>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<p v-html="giftData.giftDetails"></p>
						<!-- #endif -->
					</view>
					<view class="clause">
						<!-- <rich-text :nodes="data.content"></rich-text> -->
						<!-- #ifdef MP-WEIXIN -->
						<rich-text :nodes="giftData.exchangeRules"></rich-text>
						<!-- #endif -->
						<!-- #ifndef MP-WEIXIN -->
						<p v-html="giftData.exchangeRules"></p>
						<!-- #endif -->
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 兑换 -->
		<view class="goToCollect">
			<view class="item" v-if = 'giftChage == 1 || progress < 100' style="background-color:#C4C4C4;" @click="tips()">
				兑换
			</view>
			<view class="item" v-else @click="qulq()">
				兑换
			</view>
		</view>
		<uniBall></uniBall>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	//#ifdef H5
	import wxshare from "../../utils/index.js";
	//#endif
	export default {
		data() {
			return {
				imgUrl: this.$imgSrc,
				id:"",
				giftData:"",
				giftId:'',
				sendByPost:'',
				progress:'',
				giftChage:'',
				curTop:300
			};
		},
		computed: {
			...mapGetters(["statusBarHeight1", "userinfo"])
		},
		onLoad(options) {
			if(options.giftId){
				this.giftId = options.giftId
				this.progress = (options.progress.split('%')[0]) * 1;
				this.giftChage = options.giftChage
				this.sendByPost = uni.getStorageSync('gift_key');
				uni.removeStorageSync('gift_key');
			}
			this.giftDetails()
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		methods: {
			tips(){
				if(this.giftChage){
					uni.showToast({
						title: '已兑换礼品，敬请关注下次活动！',
						icon: "none",
						mask: true,
					});
				}else{
					uni.showToast({
						title: '您的任务还未完成，无法兑换！',
						icon: "none",
						mask: true,
					});
				}
			},
			// 获取礼品详情
			giftDetails(){
				let that =this
				this.$myRequest.get("/api/mobile/public/getEventGiftsDetails",{
					id:this.giftId
				}).then(res => {
					this.giftData=res.eventGiftsDetails
					this.$nextTick(function(){
						uni.createSelectorQuery().in(this).select('.scroll-view-wrap').boundingClientRect(result => {
						   if (result) { 
							   that.curTop=result.top
						   }
						}).exec(); 
					})
				});
			},
			async qulq(){
				if(this.sendByPost.exchangeMethod == 1){
					id = await this.giftKeep(this.sendByPost)
					uni.navigateTo({
						url: "/pages_my/exchangeMethod?giftId=" + this.giftId + '&id='+id
					})
				}else {
					uni.setStorageSync('yjlp_key', this.sendByPost);
					uni.navigateTo({
						url: "/pages_my/exchangeMethod"
					})
				}
			},
			// 商家礼品存档
			async giftKeep(obj){
				let index =''
				await this.$myRequest.post("/api/mobile/public/addExchangeRecords",obj).then(res => {
					index = res.ExchangeRecordsId
				})
				return index
			},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					}
				});
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"]
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari"
					]
				});
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	};
</script>

<style lang="less" scoped>
	page{
		background-color: #fff;
	}
	.box {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		// padding-bottom: 150rpx;
	}
	.goToCollect{
		width: 100%;
		height: 150rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		.item{
			width: 670rpx;
			height: 80rpx;
			background-color: #64B6A8;
			border-radius: 50rpx;
			font-size: 34rpx;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.tou {
		position: fixed;
		top:0;
		width: 100%;
		// height: 88rpx;
		text-align: center;
		/* #ifdef MP-WEIXIN */
		text-align: left;
		display: flex;
		align-items: center;
		/* #endif */
		line-height: 88rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #64b6a8;

		.image1 {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			// top: 116rpx;
			left: 30rpx;
		}

		.image2 {
			position: absolute;
			width: 56rpx;
			height: 56rpx;
			bottom: 16rpx !important;
			// top: 116rpx;
			right: 30rpx;
			/* #ifdef MP-WEIXIN */
			position: initial;
			margin-left: auto;
			margin-right: 200rpx;
			/* #endif */
		}
	}
	.content {
		padding: 0 30rpx;
		padding-top: 40rpx;
		.input {
			width: 690rpx;
			padding: 0 24rpx;
			margin: 0 auto;
			height: 90rpx;
			border: 1rpx solid #e0e0e0;
			font-size: 30rpx;
	
			input {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
